﻿
@{
    ViewData["Title"] = "Edit";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="/Projects/Index">Projects</a></li>
        <li class="breadcrumb-item active" aria-current="page">Edit Project</li>
    </ol>
</nav>

<div>
    <div class="form-group">
        <label for="Name">Name</label>
        <input type="text" class="form-control" id="Name">
    </div>
    <div class="form-group">
        <label for="Code">Code</label>
        <input type="text" class="form-control" id="Code">
        <small id="emailHelp" class="form-text text-muted">远程构建时需要</small>
    </div>
    <div class="form-group form-check">
        <input type="checkbox" class="form-check-input" id="IsClearBeforeBuilding">
        <label class="form-check-label" for="IsClearBeforeBuilding">IsClearBeforeBuilding</label>
    </div>
    <div class="form-group">
        <label for="RepositoryPlugin">RepositoryPlugin</label>

        <div class="card">
            <div class="card-body">
                <div class="rep-plugins">
                    <!--模板填充-->
                </div>
                <br />
                <button type="button" class="btn btn-primary btn-sm btn-add-rep-plugin">Add Repository Plugin</button>
                <br />
            </div>
        </div>


    </div>
    <div class="form-group">
        <label for="BuildPlugin">BuildPlugin</label>
        <div class="card">
            <div class="card-body">
                <div class="build-plugins">
                    <!--模板填充-->
                </div>
                <br />
                <button type="button" class="btn btn-primary btn-sm btn-add-build-plugin">Add Build Plugin</button>
                <br />
            </div>
        </div>
    </div>

    <div class="form-group form-check">
        <input type="checkbox" class="form-check-input" id="IsBuildRemote">
        <label class="form-check-label" for="IsBuildRemote">IsBuildRemote</label>
    </div>
    <div class="form-group">
        <label for="RemoteToken">Token</label>
        <input type="text" class="form-control" id="RemoteToken">
        <small id="emailHelp" class="form-text text-muted">IsBuildRemote 勾选时，需要填写此项，以实现远程构建。远程地址为：./build/projects/build/{code}/{token}</small>
    </div>

    <div class="form-group">
        <label for="BuildedPlugin">BuildedPlugin</label>
        <div class="card">
            <div class="card-body">
                <div class="builded-plugins">
                    <!--模板填充-->
                </div>
                <br />
                <button type="button" class="btn btn-primary btn-sm btn-add-builded-plugin">Add Builded Plugin</button>
                <br />
            </div>
        </div>
    </div>
    <input type="hidden" id="Id" value="" />
    <button class="btn btn-primary btn-submit">Submit</button>
</div>
<!--插件模板 -->
<script type="text/template" id="tpl-plugin">
    <div>
        <div class="card">
            <div class="card-body">
                <select class="form-control form-control-sm">
                    <option>Small select</option>
                </select>
                <br />
                <div class="form-group">
                    <label>Path</label>
                    <input type="text" class="form-control text-path">
                    <small id="emailHelp" class="form-text text-muted">默认workspace加上自定义子路径Path，如不指定，则工作路径按默认路径</small>
                </div>
                <br />
                <iframe frameborder="0" width="100%" src="" scrolling="no">
                </iframe>
                <br />
                <button type="button" class="btn btn-danger btn-submit">Remove</button>
            </div>
        </div>
        <br />
    </div>
</script>
@section Scripts{
    <script>
        (function () {


            var repPluginInfos = [{
                Name: "demo",
                ViewPath: "View/index.html",
                Path: "netcoreapp3.1"
            }],
                buildPluginInfos = [{
                    Name: "demo",
                    ViewPath: "View/index.html",
                    Path: "netcoreapp3.1"
                }],
                buildedPluginInfos = [{
                    Name: "demo",
                    ViewPath: "View/index.html",
                    Path: "netcoreapp3.1"
                }]

            function addPlugin(pluginInfos, $pluginsbody) {

                var pluginTemplate = $('#tpl-plugin').html();
                var $plugin = $(pluginTemplate);

                var $select = $plugin.find('select');
                $select.html('<option value="">请选择</option>');
                $.each(pluginInfos, function () {
                    $select.append('<option value="' + this.id + '|' + this.path + '/' + this.viewPath + '">' + this.name + '</option>')
                })

                var $iframe = $plugin.find('iframe');
                var srcroot = '/PluginsRoot/Plugins/';
                $select.on('change', function () {
                    var values = $(this).val().split('|');
                    $iframe.attr('src', srcroot + values[1] + '?' + new Date().getTime());
                    $iframe.attr('data-id', values[0]);
                })
                $iframe.on('load', function () {
                    if (this.contentWindow.document.body.children.length > 0)
                        this.height = this.contentWindow.document.body.clientHeight;
                    else this.height = 0;
                })

                var remove = $plugin.find('button');
                remove.on('click', function () {
                    $plugin.remove();
                })
                $pluginsbody.append($plugin);
            }

            $('.btn-add-rep-plugin').on('click', function () {
                addPlugin(repPluginInfos, $('.rep-plugins'))
            })
            $('.btn-add-build-plugin').on('click', function () {
                addPlugin(buildPluginInfos, $('.build-plugins'))
            })
            $('.btn-add-builded-plugin').on('click', function () {
                addPlugin(buildedPluginInfos, $('.builded-plugins'))
            })


            $(function () {
                $.ajax({
                    url: "/Plugins/GetRepPlugins"
                    , contentType: 'application/json'
                    , async: false
                    , success: function (res) {
                        if (res.code == 1) {
                            repPluginInfos = res.data;
                        }
                    }

                })
            })
            $(function () {

                $.ajax({
                    url: "/Plugins/GetBuildPlugins"
                    , contentType: 'application/json'
                    , async: false
                    , success: function (res) {
                        if (res.code == 1) {
                            buildPluginInfos = res.data;
                        }
                    }

                })
            })
            $(function () {

                $.ajax({
                    url: "/Plugins/GetBuildedPlugins"
                    , contentType: 'application/json'
                    , async: false
                    , success: function (res) {
                        if (res.code == 1) {
                            buildedPluginInfos = res.data;
                        }
                    }

                })
            })

            $(function () {
                $.get("/Projects/GetProject", { projectid: escape('@ViewBag.projectid') }, function (res) {
                    if (res.code == 1) {
                        $('#Id').val(res.data.id);
                        $('#Code').val(res.data.code);
                        $('#Name').val(res.data.name);
                        $('#IsBuildRemote').prop('checked',res.data.isBuildRemote);
                        $('#RemoteToken').val(res.data.remoteToken);
                        $('#IsClearBeforeBuilding').prop('checked', res.data.isClearBeforeBuilding);

                        $.each(res.data.repositoryPlugins, function () {
                            loadPlugins(repPluginInfos, $('.rep-plugins'),this)
                        })
                        $.each(res.data.buildPlugins, function () {
                            loadPlugins(buildPluginInfos, $('.build-plugins'), this)
                        })
                        $.each(res.data.buildedPlugins, function () {
                            loadPlugins(buildedPluginInfos, $('.builded-plugins'), this)
                        })
                    }
                })
            })



            function loadPlugins(pluginInfos, $pluginsbody, plugin) {
                var pluginTemplate = $('#tpl-plugin').html();
                var $plugin = $(pluginTemplate);
                var currentPlugin = {};
                var $select = $plugin.find('select');
                $select.html('<option value="">请选择</option>');
                $.each(pluginInfos, function () {
                    var val = this.id + '|' + this.path + '/' + this.viewPath;
                    if (this.id == plugin.id) {
                        currentPlugin = this;
                    }
                    $select.append('<option  value="' + val + '">' + this.name + '</option>')

                })

                var $path = $plugin.find('.text-path');
                $path.val(plugin.path);

                var $iframe = $plugin.find('iframe');
                var srcroot = '/PluginsRoot/Plugins/';
                $select.on('change', function () {
                    var values = $(this).val().split('|');
                    $iframe.attr('src', srcroot + values[1] + '?' + new Date().getTime());
                    $iframe.attr('data-id', values[0]);
                })
                $iframe.on('load', function () {
                    if (this.contentWindow.document.body.children.length > 0)
                        this.height = this.contentWindow.document.body.clientHeight;
                    else this.height = 0;

                    if (currentPlugin.id == $iframe.attr('data-id') && this.contentWindow.setFormData)
                        this.contentWindow.setFormData(plugin.config);
                })

                $select.val(currentPlugin.id + '|' + currentPlugin.path + '/' + currentPlugin.viewPath)
                $iframe.attr('src', srcroot + currentPlugin.path + '/' + currentPlugin.viewPath + '?' + new Date().getTime());
                $iframe.attr('data-id', currentPlugin.id);


                var $remove = $plugin.find('button');
                $remove.on('click', function () {
                    debugger
                    $plugin.remove();
                })

                $pluginsbody.append($plugin);

            }


            function submit() {
                var data = {}
                data.id = $('#Id').val();
                data.code = $('#Code').val();
                data.name = $('#Name').val();
                data.repositoryPlugins = []
                data.buildPlugins = []
                data.buildedPlugins = []

                $('.rep-plugins .card').each(function () {
                    var $iframe = $(this).find('iframe');
                    var $path = $(this).find('.text-path');
                    data.repositoryPlugins.push({
                        id: $iframe.attr('data-id'),
                        config: $iframe[0].contentWindow.getFormData(),
                        path: $path.val()
                    });
                });
                $('.build-plugins .card').each(function () {
                    var $iframe = $(this).find('iframe');
                    var $path = $(this).find('.text-path');
                    data.buildPlugins.push({
                        id: $iframe.attr('data-id'),
                        config: $iframe[0].contentWindow.getFormData(),
                        path: $path.val()
                    });
                });

                $('.builded-plugins .card').each(function () {
                    var $iframe = $(this).find('iframe');
                    var $path = $(this).find('.text-path');
                    data.buildedPlugins.push({
                        id: $iframe.attr('data-id'),
                        config: $iframe[0].contentWindow.getFormData(),
                        path: $path.val()
                    });
                });
                debugger
                data.isBuildRemote = $('#IsBuildRemote').prop('checked');
                data.RemoteToken = $('#RemoteToken').val();
                data.IsClearBeforeBuilding = $('#IsClearBeforeBuilding').prop('checked') ;


                $.post("/Projects/EditProject", data, function (res) {
                    if (res.code == 1) {
                        location.href = '/Projects'
                    }
                    else alert(res.msg)
                });
            }

            $('.btn-submit').on('click', submit);

        }())
    </script>
}

